<!--
 * @Author: your name
 * @Date: 2021-08-25 14:10:11
 * @LastEditTime: 2021-08-25 14:12:29
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \common-vue\kVue\01-reactive.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script type="text/javascript">
    const obj = {}
    function defineReactive(obj, key, value) {
      Object.defineProperty(obj, key, {
        get() {
          console.log('get', value)
          return value
        },
        set (newValue) {
          if (newValue === value) {
            return
          }
          // console.log('obj来更新now数据,新值: ', newValue)
          update(newValue)
          value = newValue
        }
      })
    }
    defineReactive(obj, 'now', '')
    obj.now = new Date().toLocaleTimeString()
    setInterval(() => {
      obj.now = new Date().toLocaleTimeString()
      console.log('setInterval', obj.now)
    }, 2000)

    function update(newValue){
      document.getElementById('app').innerHTML = newValue
    }

    
  </script>
</body>
</html>